import { useGetTheme } from '@/hooks/useTheme';
import { vars } from 'nativewind';
import React from 'react';
import { View, ViewProps } from 'react-native';

type TailwindThemedViewProps = {} & ViewProps;
const colors = {
  light: vars({
    'color-brand-1': '#13C773',
    'color-brand-2': '#0FB870',
    'color-brand-3': '#A1ECCE',
    'color-brand-4': '#E2F8EF',
    'color-line-1': '#E6E6E6',
    'color-line-2': '#BFBFBF',
    'color-fill-1': '#F7F9FA',
    'color-fill-2': '#FFFFFF',
    'color-fill-3': '#F5F5F5',
    'color-fill-4': '#F0F0F0',
    'color-text-1': '#262626',
    'color-text-2': '#595959',
    'color-text-3': '#8C8C8C',
    'color-text-4': '#BFBFBF',
    'color-text-5': '#D9D9D9',
    'color-text-6': '#FFFFFF',
    'color-blue-1': '#33A0FF',
    'color-blue-2': '#EAF4FE',
    'color-red-1': '#F74A4B',
    'color-red-2': '#FFF0F0',
    'color-orange-1': '#FF971F',
    'color-orange-2': '#FEF2E5',
    'color-yellow-1': '#FBBF24',
    'color-yellow-2': '#FCF4D6',
  }),
  dark: vars({
    'color-brand-1': '#13C773',
    'color-brand-2': '#0FB870',
    'color-brand-3': '#196548',
    'color-brand-4': '#1B3734',
    'color-line-1': '#373A3E',
    'color-line-2': '#3C4148',
    'color-fill-1': '#101214',
    'color-fill-2': '#242629',
    'color-fill-3': '#2D2F33',
    'color-fill-4': '#36383D',
    'color-text-1': '#E6E7E8',
    'color-text-2': '#B9BABC',
    'color-text-3': '#8C8E91',
    'color-text-4': '#3B3D40',
    'color-text-5': '#373839',
    'color-text-6': '#000',
    'color-blue-1': '#4DACFF',
    'color-blue-2': '#263E55',
    'color-blue-3': '#2B4C6B',
    'color-red-1': '#F74A4B',
    'color-red-2': '#FFF0F0',
    'color-orange-1': '#FFA640',
    'color-orange-2': '#3F372F',
    'color-orange-3': '#614A31',
    'color-yellow-1': '#FBCA4B',
    'color-yellow-2': '#3E3C30',
    'color-yellow-3': '#605535',
  }),
};
const TailwindThemedView: React.FC<TailwindThemedViewProps> = (props) => {
  const { className: classNameFromOutside, ...rest } = props;
  const theme = useGetTheme();
  const className = `${classNameFromOutside}`;

  return (
    <>
      <View className={className} style={colors[theme]} {...rest} />
    </>
  );
};

export default React.memo(TailwindThemedView);
